/*common*/
.tabScroll {
  white-space: nowrap;
  overflow: hidden;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.noDataPrompt {
  width: 100%;
  text-align: center;
  padding: 0.55rem 0 0.95rem;
  color: #bcc1c3;
  font-size: 0.28rem;
}

.noDataPrompt .messageImg {
  width: 3.29rem;
  height: 1.19rem;
  display: inline-block;
  background: url("../assets/images/noData.png") no-repeat;
  background-size: cover;
}

/*#backTop {
  width: 0.86rem;
  height: 0.86rem;
  position: absolute;
  right: 0.24rem;
  bottom: 1.6rem;
  z-index: 99;
  background: url("../assets/images/backTop.png");
  background-size: contain;
  display: none;
}*/

.home_box { /*z-index: 9;*/
  background: #ffffff; /*min-height: 1200px;*/
  top: 0px;
  -ms-transition: all .4s;
  -o-transition: all .4s;
  -moz-transition: all .4s;
  -webkit-transition: all .4s;
  transition: all .4s;
  -webkit-backface-visibility: hidden;
}

.home_box, .page {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}


.icon_head {
  width: 1.5rem;
  height: 1.5rem;
  background-color: #d8d8d8;
  border-radius: 1.5rem;
  margin-top: 0.8rem;
}

.login_hello {
  font-size: 0.32rem;
  margin-top: 0.3rem;
}

.logined_user {
  font-size: 0.32rem;
  margin-top: 0.3rem;
}

.login_user, .logined_user_account {
  font-size: 0.26rem;
  margin: 0.25rem 0;
  color: #898989;
}

.gold_num {
  color: #373737;
}

.login_box {
  width: 90%;
  height: 2.6rem;
  border-top: 2px solid #e3e3e3;
  margin: 0.8rem auto;
}

.user_box {
  width: 90%;
  height: 5.3rem;
  border-top: 2px solid #e3e3e3;
  margin: 0.8rem auto;
}

.login_element, .charge_element, .golddetail_element {
  text-align: left;
  height: 1.32rem;
  line-height: 1.32rem;
  border-bottom: 2px solid #e3e3e3;
  font-size: 0.32rem;
}

.icon_login {
  background-image: url("../assets/images/icon_login.png");
  width: 0.63rem;
  height: 0.63rem;
  float: left;
  margin: 0.34rem 0.35rem;
}

.register_element, .quit_element {
  text-align: left;
  height: 1.32rem;
  line-height: 1.32rem;
  font-size: 0.32rem;
  border-bottom: 2px solid #e3e3e3;
}

.icon_register {
  background-image: url("../assets/images/icon_register.png");
  width: 0.63rem;
  height: 0.63rem;
  float: left;
  margin: 0.34rem 0.35rem;
}

.icon_guess {
  background-image: url("../assets/images/icon_guess.png");
  width: 0.63rem;
  height: 0.63rem;
  float: left;
  margin: 0.34rem 0.35rem;
}

.icon_dollor {
  background-image: url("../assets/images/icon_dollor.png");
  width: 0.63rem;
  height: 0.63rem;
  float: left;
  margin: 0.34rem 0.35rem;
}

.icon_detail {
  background-image: url("../assets/images/icon_detail.png");
  width: 0.63rem;
  height: 0.63rem;
  float: left;
  margin: 0.34rem 0.35rem;
}

.icon_quit {
  background-image: url("../assets/images/icon_quit.png");
  width: 0.63rem;
  height: 0.63rem;
  float: left;
  margin: 0.34rem 0.35rem;
}

.navMenus {
  width: 100%;
  height: 1.54rem;
  overflow: hidden;
  border-bottom: 1px solid #e3e3e3;
  position: absolute;
  top: 0;
  background: #fff;
  z-index: 10;
}

.navMenus .topBar {
  position: relative;
}

.mask {
  position: fixed;
  top: 0;
  left: -6rem;
  background: rgba(130, 130, 130, 0.3);
  width: 100%;
  height: 100%; /*opacity: 0.1;*/
  display: none;
  z-index: 100;
}

.topBar {
  width: 100%;
  height: 0.82rem;
  line-height: 0.82rem;
  background-color: #373737;
  text-align: center;
  position: absolute;
  top: 0px;
  z-index: 10;
}

.topBar .pull_left {
  padding-left: 0.4rem;
  position: relative;
  z-index: 99;
}

.topBar .pull_right {
  padding-right: 0.4rem;
  position: relative;
  z-index: 99;
}

.topBar .icon_lang {
  width: 0.38rem;
  height: 0.36rem;
  background-image: url("../assets/images/icon_lang.png");
}

.topBar .icon_me {
  width: 0.4rem;
  height: 0.4rem;
  background-image: url("../assets/images/icon_me.png");
  padding-bottom: 0.01rem;
}

.topBar .icon_more {
  width: 0.06rem;
  height: 0.29rem;
  background-image: url("../assets/images/icon_more.png");
  margin-left: 0.3rem;
}

.topBar .icon_arrLeft {
  width: 0.22rem;
  height: 0.4rem;
  background-image: url("../assets/images/icon_arrLeft.png");
}

.topBar .title {
  position: absolute;
  width: 100%;
  color: #898989;
  font-size: 0.32rem;
}

.topBar .title .logo {
  display: inline-block;
  vertical-align: middle;
  background-size: cover;
}

.topBar .title .logo_lol {
  width: 1.54rem;
  height: 0.47rem;
  background-image: url("../assets/images/logo_lol.png");
}

.topBar .title .logo_ly {
  width: 2.10rem;
  height: 0.39rem;
  background-image: url("../assets/images/logo_ly.png");
}

.topBar .title .logo_dota2 {
  width: 2.44rem;
  height: .61rem;
  background-image: url("../assets/images/logo_dota.png");
}

.headBar {
  width: 100%;
  height: 0.72rem;
  line-height: 0.72rem;
  text-align: center;
  border-bottom: 2px solid #e3e3e3;
  font-size: 0.32rem;
  background: #fff;
}

.headBar li a {
  height: 0.72rem;
  line-height: 0.72rem;
  display: inline-block;
  padding: 0 0.4rem;
  color: #000;
}

.normalHead {
  margin-bottom: 0.18rem;
  position: absolute;
  top: 0.82rem;
  z-index: 10;
}

.clearSpace {
  margin-bottom: 0;
}

.normalHead li {
  display: table-cell;
  width: 1%;
}

.normalHead li a {
  height: 0.72rem;
  line-height: 0.72rem;
  display: inline-block;
  padding: 0 0.4rem;
  color: #000;
}

.normalHead li.active a {
  color: #0088f0;
  border-bottom: 2px solid #0091ff;
}

.scrollHead {
  width: 100%;
  height: 1.0rem;
  white-space: nowrap;
  overflow: hidden;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.scrollHead ul {
  height: 0.72rem;
  line-height: 0.72rem;
}

.scrollHead li {
  display: inline-block;
  margin: 0 0.3rem;
}

.scrollHead li.active a {
  border-bottom: 2px solid #0091ff;
  box-sizing: border-box;
}

/*.infoType {
  height: 1.04rem;
  line-height: 1.04rem;
  padding: 0 0.1rem;
  text-align: center;
  position: absolute;
  top: 1.56rem;
  background: #fff;
  width: 100%;
  z-index: 10;
  border-bottom: 1px solid #e3e3e3;
  overflow: hidden;
}

.infoType .infoScroll {
  height: 1.44rem;
  overflow-x: auto;
}

.infoType .infoScroll li {
  display: inline-block;
}

.infoType .infoScroll li a {
  margin-right: 2.0rem;
  padding: 0.09rem 0.36rem;
  border: 1px solid #99d3ff;
  border-radius: 15px;
  color: #0091ff;
  font-size: 0.28rem;
  margin: 0 0.22rem;
}*/

.infoType .infoScroll li.active a {
  color: #fff;
  background: #0091ff;
  border: 1px solid #0091ff;
}

.confixSet {
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  overflow: auto;
}

.fixTop_260 {
  top: 2.6rem;
}

.fixTop_158 {
  top: 1.58rem;
}

.fixTop_186 {
  top: 1.86rem;
}

.fixTop_82 {
  top: 0.82rem;
}

.banner {
  width: 100%;
  height: 3.85rem;
  overflow: hidden;
}

.swiper-container {
  padding-bottom: 21px;
  padding-bottom: 0;
}

.swiper-container-horizontal > .swiper-pagination {
  text-align: right;
  height: 0.45rem;
  line-height: 0.45rem;
  bottom: 0rem;
  right: 0.4rem;
  left: auto;
}

.swiper-container-horizontal > .swiper-pagination .swiper-pagination-bullet {
  margin: 0 0.1rem;
}

.swiper-slide p {
  position: absolute;
  bottom: 0px;
  z-index: 100;
  color: #fff;
  width: 100%;
  height: 0.45rem;
  line-height: 0.45rem;
  background: #373737;
  margin: 0px;
}

.swiper-slide p span {
  width: 5.82rem;
  padding-left: 0.1rem;
  font-size: 0.26rem;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.swiper-slide img {
  width: 100%;
  height: 3.85rem;
}

.gameType {
  height: 1.34rem; /*line-height:1.34rem;*/
  overflow: hidden;
}

.gameType .gameScroll {
  height: 1.74rem;
}

.gameType .gameScroll a {
  margin: 0.25rem 0.08rem;
  box-sizing: border-box;
  text-align: center;
  color: #7b7b7b;
  font-size: 0.3rem;
  border: 1px solid #c2c2c2;
  border-radius: 0.4rem;
  padding: 0.18rem 0;
  width: 1.65rem;
  display: inline-block;
}

.gameType .gameScroll a.active {
  color: #0091ff;
}

.gameList {
  padding: 0.26rem 0.3rem 0.3rem;
}

.compreList {
  padding-top: 0;
}

.gameItem {
  height: 1.74rem;
  margin-bottom: 0.24rem;
}

.gameItem .img {
  width: 2.65rem;
  height: 1.74rem;
  margin-right: 0.2rem;
  padding-left: 0.1rem;
  box-sizing: border-box;
  overflow: hidden;
}

.gameItem .img img { /*height:77px;*/
  height: 100%;
}

.gameItem .detail {
  width: 3.96rem;
}

.gameItem .detail .title {
  padding-left: 0.12rem;
  margin-top: 0.05rem;
  color: #373737;
  height: 0.4rem;
  font-size: 0.3rem;
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gameItem .detail .title::before {
  content: "";
  width: 0.08rem;
  height: 0.3rem;
  background: #0091ff;
  position: absolute;
  left: 0px;
  top: 0.08rem;
}

.gameItem .detail .intro {
  height: 0.7rem;
  color: #3a3a3a;
  font-size: 0.26rem;
  padding: 0.08rem 0 0.16rem 0;
  overflow: hidden;
}

.gameItem .detail .time {
  color: #999999;
  font-size: 0.22rem;
}

.myGuess .profit ul {
  width: 100%;
  display: table;
  text-align: center;
  padding: 0.15rem 0;
}

.myGuess .profit ul:first-child {
  border-bottom: 2px solid #e3e3e3;
}

.myGuess .profit li {
  display: table-cell;
  width: 33.3333%;
  border-right: 1px solid #d8d8d8;
  box-sizing: border-box;
}

.myGuess .profit li:last-child {
  border-right: none;
}

.myGuess .profit .num {
  color: #606060;
  font-size: 0.34rem;
}

.myGuess .profit .text {
  color: #8b8b8b;
  font-size: 0.26rem;
}

.myGuess .guessItem .title {
  height: 0.62rem;
  line-height: 0.68rem;
  background: #f8f8f8;
  font-size: 0.28rem;
  color: #9c9c9c;
}

.myGuess .guessItem .title, .myGuess .guessItem p {
  padding-left: 0.58rem;
}

.myGuess .guessItem .title .date {
  position: relative;
  padding-left: 0.6rem;
  display: inline-block;
  padding-right: 0.3rem;
}

.myGuess .guessItem .title .date::before {
  content: "";
  position: absolute;
  width: 0.34rem;
  height: 0.34rem;
  left: 0;
  top: 0.14rem;
  background: url("../assets/images/icon_time.png") no-repeat;
  background-size: 100%;
}

.myGuess .guessItem .guessIcon img {
  height: 0.36rem;
  width: auto;
  padding-right: 0.3rem;
  display: inline-block;
  margin-top: 0.13rem;
}

.myGuess .guessItem .detail {
  position: relative;
  color: #8e8e8e;
  font-size: 0.24rem;
  line-height: 0.45rem;
  padding: 0.1rem 0 0.15rem;
}

.myGuess .guessItem .detail .name {
  max-width: 2.6rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  float: left;
  padding-right: 0.3rem;
}

.myGuess .guessItem .detail .vsInfo {
  max-width: 2.6rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  float: left;
}

.myGuess .guessItem .detail em {
  font-weight: normal;
}

.myGuess .guessItem .detail .vs {
  padding: 0 0.12rem;
}

.myGuess .guessItem .gold {
  font-size: 0.26rem;
}

.myGuess .guessItem .winGold {
  color: #0d8e00;
}

.myGuess .guessItem .negative {
  color: #ef4d4d
}

.myGuess .guessItem .state {
  position: absolute;
  top: 0.16rem;
  right: 0.48rem;
}

.myGuess .guessItem .icon_settled {
  padding-left: 0.52rem;
  color: #ef4d4d;
}

.myGuess .guessItem .icon_invalid {
  padding-left: 0.38rem;
  right: 0.66rem;
}

.myGuess .guessItem .icon_notSettled em {
  font-size: 0.32rem;
}

.myGuess .guessItem .icon_settled::before {
  content: "";
  width: 0.34rem;
  height: 0.38rem;
  background-image: url("../assets/images/icon_settled.png");
  position: absolute;
  left: 0;
  top: 0.02rem;
}

.myGuess .guessItem .icon_invalid::before {
  content: "";
  width: 0.2rem;
  height: 0.34rem;
  background-image: url("../assets/images/icon_invalid.png");
  position: absolute;
  left: 0;
  top: 0.05rem;
}

.guessDetail .matchTop {
  height: 3.50rem;
  background: url("../assets/images/vsBg.jpg") no-repeat;
  background-size: cover;
  text-align: center;
  display: table;
  color: #fff;
  position: relative;
}

.guessDetail .matchTop .matchName {
  width: 100%;
  text-align: center;
  font-size: 0.36rem;
  padding: 0.18rem 0;
  position: absolute;
}

.guessDetail .matchTop .team, .guessDetail .matchTop .teamLogo {
  display: table-cell;
  vertical-align: middle;
}

.guessDetail .matchTop .team {
  width: 2.75rem;
  text-align: center;
}

.guessDetail .matchTop .team .btn {
  width: 1.48rem;
  height: 0.44rem;
  line-height: 0.44rem;
  border-radius: 15px;
  font-size: 0.28rem;
  display: inline-block;
  overflow: hidden;
  padding: 0 0.12rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guessDetail .matchTop .team .first {
  background: #0091ff;
}

.guessDetail .matchTop .team .second {
  background: #d05374;
}

.guessDetail .matchTop .teamLogo {
  width: 1.06rem;
  height: 1.06rem;
  line-height: 1.06rem;
  display: inline-block;
  border-radius: 50%;
  background: #fff;
  overflow: hidden;
  text-align: center;
  margin-bottom: 0.16rem;
}

.guessDetail .matchTop .teamLogo_lushi {
  border: 1px solid #C1C1C1;
  border-radius: 6px;
  width: 1.06rem;
  height: 1.06rem;
  line-height: 1.06rem;
  display: inline-block;
  background: #fff;
  overflow: hidden;
  text-align: center;
  margin-bottom: 0.16rem;
}

.guessDetail .matchTop img {
  display: inline-block;
  vertical-align: middle;
}

.guessDetail .matchTop .vsdetail {
  width: 2.0rem;
  height: 3.50rem;
  background: url("../assets/images/bgPai.png") no-repeat center top;
  background-size: contain;
  position: relative;
}

.guessDetail .matchTop .score {
  padding-top: 1.24rem;
  color: #000;
  font-size: 0.42rem;
  height: 0.88rem;
  line-height: 0.88rem;
}

.guessDetail .matchTop .matchTime {
  width: 100%;
  font-size: 0.2rem;
  position: absolute;
  bottom: 3px;
  box-sizing: border-box;
  line-height: 0.3rem;
}

.guessDetail .matchTab {
  width: 100%;
  border-bottom: 1px solid #e3e3e3;
  display: table;
  text-align: center;
}

.guessDetail .matchTab li {
  height: 0.72rem;
  line-height: 0.72rem;
  display: table-cell;
}

.guessDetail .matchTab li a {
  height: 0.72rem;
  line-height: 0.72rem;
  color: #000;
  font-size: 0.32rem;
  display: inline-block;
  padding: 0 0.38rem;
}

.guessDetail .matchTab li.active a {
  color: #0088f0;
  border-bottom: 2px solid #0091ff;
}

.guessDetail .gameTab {
  height: 0.76rem;
  line-height: 0.73rem;
  overflow: hidden;
  display: block;
  box-sizing: border-box;
}

.guessDetail .gameTab .gametypeScroll {
  height: 1.13rem;
  text-align: center;
}

.guessDetail .gameTab a {
  font-size: 0.32rem;
  color: #333;
  box-sizing: border-box;
  padding: 0 0.3rem;
  display: inline-block; /*margin:0 0.54rem;*/
  margin: 0 0.25rem;
}

.guessDetail .gameTab a.active {
  border-bottom: 2px solid #0091ff;
  color: #0091ff;
}

.guessList {
  padding-bottom: 0.9rem;
}

.guessList li {
  width: 100%;
  height: 1.0rem;
  line-height: 1.0rem;
  display: table;
  table-layout: fixed;
  text-align: center;
  padding: 0 0.3rem;
  box-sizing: border-box;
}

.guessList li:nth-child(odd) {
  background: #eaeced;
}

.guessList li:nth-child(even) {
  background: #e0e3e4;
}

.guessList .teamName, .guessList .vsInfo {
  display: table-cell;
  width: 33.333%;
  vertical-align: middle;
}

.guessList .teamName a {
  width: 2.10rem;
  height: 0.6rem;
  line-height: 0.65rem;
  border: 1px solid #99d3ff;
  border-radius: 15px;
  display: inline-block;
  vertical-align: middle;
  background: #fff;
  font-size: 0.28rem;
  color: #0088f0;
  span {
    display: inline-block;
    vertical-align:top;
    &.name {
      width: 1.3rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}

.guessList .teamName a.active {
  background: #0091ff;
  color: #fff;
  border: 1px solid #0091ff;
}

.guessList .teamName .odds {
  padding-left: 0.1rem;
}

.guessList .vsInfo {
  height: 1.0rem;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0 0.2rem;
  line-height: 0.28rem;
  font-size: 0.26rem;
  color: #3c3c3c;
}

.guessList .vsInfo .other {
  color: #8f8f8f;
  font-size: 0.24rem;
}

.analysisList .ranking {
  height: 0.45rem;
  line-height: 0.45rem;
  text-align: center;
  box-sizing: border-box; /*border-bottom:1px solid #dadada;*/
  color: #878787;
  font-size: 0.26rem;
}

.analysisList .ranking i {
  font-style: normal;
}

.analysisList .ranking .vs {
  padding: 0 1.0rem;
}

.analysisList .statistItem {
  background: #eaeced;
  padding: 0.14rem 0.54rem;
  border-bottom: 1px solid #e2e2e2;
  color: #878787;
  line-height: 0.4rem;
}

.analysisList .statistItem:last-child {
  border-bottom: none;
}

.analysisList .statistItem .title {
  font-size: 0.26rem;
  padding-left: 0.15rem;
  position: relative;
}

.analysisList .statistItem .title::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #878787;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -2px;
}

.analysisList .statistItem .winningRate {
  font-size: 0.24rem;
}

.analysisList .statistItem .Bd05374 {
  color: #d05374;
}

.analysisList .statistItem .rateBar {
  width: 100%;
  height: 0.12rem;
  background: #ff8dab;
  border-radius: 5px;
  margin-top: 0.06rem;
  overflow: hidden;
}

.analysisList .statistItem .notRate {
  background: #D8D8D8;
}

.analysisList .statistItem .leftRate {
  background: #71c1ff;
  width: 0%;
  height: 100%;
}

.analysisList .statistItem .rateNum {
  padding: 0 0.15rem;
}

.analysisList .statistItem .rateNum i {
  font-style: normal;
}

.againstList .againstTitle {
  background: #eaeced;
  padding: 0.1rem 0;
}

.againstList .againstTitle table {
  width: 100%;
  color: #868686;
  font-size: 0.24rem;
  line-height: 0.45rem;
  table-layout: fixed;
  border-collapse: collapse;
}

.againstList .againstTitle .light {
  color: #189aff;
}

.againstList .againstTitle .pink {
  color: #ff8dab;
}

.againstList .againstTitle p {
  text-align: center;
  font-size: 0.26rem;
}

.againstList .againstTitle p i {
  font-style: normal;
  margin: 0 5px;
}

.againstList .againstTitle .odd {
  text-align: right;
  vertical-align: sub;
}

.againstList .againstTitle .even {
  word-wrap: break-word;
  vertical-align: initial;
  line-height: 100%;
  padding-bottom: 4px;
  padding-right: 5px;
}

.againstList .againstTitle .odd i {
  font-style: normal;
  float: right;
}

.analysisList .vsBlock {
  padding: 0.22rem 0 0.1rem;
  text-align: center;
  color: #878787;
  font-size: 0.26rem;
}

.analysisList .vsBlock span i {
  font-style: normal;
  margin: 0 8px;
}

.analysisList .vsBlock .vs {
  padding: 0 0.9rem;
}

.analysisList .vsBlock .team::before {
  content: "";
  width: 0.23rem;
  height: 0.23rem;
  display: inline-block;
  margin-right: 9px;
}

.analysisList .vsBlock .teamOne::before {
  content: "";
  background: #71c1ff;
}

.analysisList .vsBlock .teamTwo::before {
  content: "";
  background: #ff8dab;
}

.againstList .statistItem {
  background: #fff;
}

.historiGrips {
  padding-bottom: 0.6rem;
}

.historiGrips .title {
  height: 0.5rem;
  line-height: 0.5rem;
  background: #e0e3e4;
  text-align: center;
  font-size: 0.28rem;
  color: #9c9c9c;
}

.historiGrips li {
  width: 100%;
  height: 0.9rem;
  line-height: 0.9rem;
  box-sizing: border-box;
  border-bottom: 1px solid #e3e3e3;
  color: #868686;
  font-size: 0.26rem;
  padding-left: 0.12rem;
  display: table;
  table-layout: fixed;
  position: relative;
}

.historiGrips li::after {
  content: "";
  width: 0.18rem;
  height: 0.32rem;
  background: url("../assets/images/icon_arrowRight.png") no-repeat;
  background-size: 100%;
  position: absolute;
  right: 0.37rem;
  top: 50%;
  margin-top: -0.16rem;
}

.historiGrips .date, .historiGrips .team, .historiGrips .vs {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.historiGrips .date {
  width: 2.0rem;
}

.historiGrips .vs {
  width: 0.7rem;
  color: #0091ff;
}

.historiGrips .team {
  width: 2.0rem;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  white-space: nowrap;
}

.historiGrips .team .score {
  position: absolute;
  width: 0.6rem;
  text-align: center;
}

.historiGrips .teamOne {
  padding-right: 0.6rem;
}

.historiGrips .teamTwo {
  padding-left: 0.6rem;
}

.historiGrips .teamOne .score {
  right: 0;
}

.historiGrips .teamTwo .score {
  left: 0;
}

.guessPopup {
  width: 100%;
  position: fixed;
  bottom: -5rem;
  left: 0;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
  z-index: 1000
}

.guessPopup .popupCon {
  width: 7.26rem;
  margin: 0 auto;
  box-shadow: 5px 0 24px rgba(144, 144, 144, 0.3);
  background: #fff;
}

.guessPopup .title {
  height: 0.8rem;
  line-height: 0.86rem;
  background: #f2f2f2;
  color: #9c9c9c;
  position: relative;
  font-size: 0.28rem;
}

.guessPopup .title h3 {
  width: 4.26rem;
  box-sizing: border-box;
  padding-left: 0.2rem;
  font-size: 0.28rem;
}

.guessPopup .title i {
  font-style: normal;
  font-size: 0.32rem;
  display: inline-block;
  vertical-align: middle;
}

.guessPopup .balance {
  position: absolute;
  right: 0.26rem;
  top: 0;
}

.guessPopup .icon_balance::before {
  content: "";
  width: 0.37rem;
  height: 0.36rem;
  background-image: url("../assets/images/balance.png");
  display: inline-block;
  margin-top: -0.1rem;
  margin-right: 0.12rem;
}

.guessPopup .btnGroup a {
  width: 21%;
  margin: 0 2%;
  box-sizing: border-box;
}

.guessPopup .quiz {
  color: #9c9c9c;
  font-size: 0.26rem;
  text-align: center;
}

.guessPopup .quiz .otherSelec {
  padding: 0.18rem 0;
  border-bottom: 1px dashed #d7d7d7;
}

.guessPopup .quiz .otherSelec .left {
  padding-right: 0.4rem;
}

.guessPopup .quiz .getGold {
  font-size: 0.36rem;
  color: #373737;
  font-weight: normal;
  padding: 0 0.12rem;
}

.guessPopup .quiz .btn {
  border-radius: 15px;
  display: inline-block;
}

.guessPopup .quiz .enterNum {
  width: 1.52rem;
  height: 0.52rem;
  border: 1px solid #d9d9d9;
  color: #878787;
  font-size: 0.32rem;
  text-align: center;
}

.guessPopup .btnGroup {
  padding: 0.18rem 0;
}

.guessPopup .btnGroup li {
  display: table-cell;
  width: 1%;
  text-align: center;
}

.guessPopup .btnGroup li.active a {
  border: 1px solid #0091ff;
  background: #0091ff;
  color: #fff;
}

.guessPopup .btnGroup li a {
  width: 1.50rem;
  height: 0.66rem;
  line-height: 0.66rem;
  border: 1px solid #99d3ff;
  font-size: 0.28rem;
  color: #0091ff;
}

.guessPopup .sureQuiz {
  height: 0.74rem;
  line-height: 0.74rem;
  padding: 0 0.56rem;
  background: #ffc331;
  color: #fff;
  margin: 0.3rem auto;
  font-size: 0.28rem;
  border-radius: 30px;
  display: inline-block;
}

.popup {
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(55, 55, 55, 0.5);
  width: 100%;
  height: 100%;
  display: none;
  z-index: 999;
}

.pop_login {
  width: 5.4rem;
  height: 3.3rem;
  top: 0;
  position: absolute;
  z-index: 1001;
  background: #ffffff;
  border-radius: 0.2rem;
  margin: 0 auto;
  left: 50%;
  top: 50%;
  margin-top: -1.65rem;
  margin-left: -2.7rem;
  display: none;
}

.pop_login .title1 {
  font-size: 0.3rem;
  text-align: center;
  margin-top: 0.54rem;
  margin-bottom: 0.40rem;
  color: #bababa;
}

.pop_login .title2 {
  font-size: 0.3rem;
  text-align: center;
  margin-bottom: 0.45rem;
  color: #333333;
}

.pop_login .btnArea {
  display: -webkit-box;
}

.pop_login .btnArea button {
  width: 1.85rem;
  height: 0.71rem;
  margin-left: 0.5rem;
  text-align: center;
  border-radius: 0.2rem;
  color: white;
}

.pop_login .btnArea .cancel {
  background: #9c9c9c;
  font-size: 0.3rem;
}

.pop_login .btnArea .confirm {
  background: #ffc331;
  font-size: 0.3rem;
}

.pop_languague {
  display: none;
  width: 5.4rem;
  height: 3.8rem;
  position: absolute;
  position: absolute;
  z-index: 1000;
  background: #ffffff;
  border-radius: 0.2rem;
  margin: 0 auto;
  left: 50%;
  top: 50%;
  margin-top: -1.9rem;
  margin-left: -2.7rem;
}

.pop_languague .langBox {
  min-height: 1.6rem;
  padding: 0.35rem 0.35rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
}

.pop_languague .langBox .lang {
  width: 1.7rem;
  height: 0.55rem;
  margin: 0.2rem 0.3rem;
  font-size: 0.28rem;
  line-height: 0.55rem;
  padding-top: 0.05rem;
  border-radius: 0.3rem;
  border: 1px solid #0091ff;
  color: #0091ff;
  text-align: center;
}

.pop_languague .langBox .lang.langActive, .popup_matchFliter ul li.active {
  background: #0091ff;
  color: white;
}

.pop_languague .btnArea {
  text-align: center;
}

.pop_languague .btnArea .confirm {
  width: 1.85rem;
  height: 0.71rem;
  background: #ffc331;
  color: white;
  border-radius: 0.2rem;
  text-align: center;
  font-size: 0.3rem;
}

.informationDetail {
  width: 100%;
  padding: 0.3rem 0.3rem 0rem 0.3rem;
  box-sizing: border-box;
}

.informationDetail .herderBar .title {
  font-size: 0.36rem;
  color: #333;
  text-align: left;
  line-height: 0.44rem;
}

.informationDetail .herderBar .time {
  font-size: 0.22rem;
  color: #878787;
  padding: 0.1rem 0rem 0.12rem 0rem;
}

.informationDetail .article p {
  padding-bottom: 0.2rem;
}

.informationDetail .article img {
  width: auto;
  max-width: 100% !important;
  height: auto !important;
}

.btn_Fliter {
  width: 0.86rem;
  height: 0.86rem;
  position: fixed;
  right: 0.24rem;
  bottom: 3.0rem;
  background: url("../assets/images/icon_btn_Fliter.png");
  background-size: contain;
}

.popup_matchFliter {
  width: 6.88rem;
  height: auto;
  position: absolute;
  z-index: 1000;
  background: #ffffff;
  border-radius: 0.1rem;
  margin: 0 auto;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  display: none;
  text-align: center;
}

.action {
  display: block;
}

.popup_matchFliter .title {
  width: 100%;
  height: 0.77rem;
  border-radius: 0.1rem 0.1rem 0 0;
  line-height: 0.77rem;
  background: #f2f2f2;
  font-size: 0.36rem;
  text-align: center;
  color: #9c9c9c;
}

.popup_matchFliter ul {
  overflow: hidden;
  height: auto;
  border-bottom: 2px dotted #dbdbdb;
  margin-bottom: 0.24rem;
  padding: 0.25rem 0.15rem 0.25rem;
}

.popup_matchFliter ul li {
  float: left;
  width: 1.92rem;
  height: 0.6rem;
  border: 1px solid #99d3ff;
  border-radius: 0.1rem;
  color: #0091ff;
  text-align: center;
  margin: 0.075rem;
  font-size: 0.24rem;
  padding: 0.02rem 0.04rem;
  overflow: hidden;
  line-height: 0.26rem;
}

.popup_matchFliter ul li span {
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-box-pack: center;
  height: .5rem;
  overflow: hidden;
}

input[name='fliter'] {
  display: none;
}

.js_select {
  display: inline-block;
  margin: 0 0 0.1rem 0.35rem;
}

.cleckAll, .checkInverse {
  width: 1.23rem;
  height: 0.42rem;
  border-radius: 0.1rem;
  line-height: 0.42rem;
  margin-bottom: 0.24rem;
  font-size: 0.24rem;
}

.cleckAll {
  border: 1px solid #99d3ff;
  color: #0091ff;
}

.checkInverse {
  border: 1px solid #9c9c9c;
  color: #9c9c9c;
}

.cleckAll i, .checkInverse i {
  display: inline-block;
  width: 0.27rem;
  height: 0.27rem;
  border: 1px solid #99d3ff;
  margin-right: 0.15rem;
}

.cleckAll i.active, .checkInverse i.active {
  background: url("../assets/images/icon_btn_gou.png");
  background-size: contain;
}

/*.js_select span{position: relative;top:-0.06rem;font-size: 0.24rem;}*/
.popup_matchFliter .btnArea button {
  width: 2.25rem;
  height: 0.71rem;
  text-align: center;
  border-radius: 0.2rem;
  color: white;
  margin: 0 0.25rem;
  font-size: 0.3rem;
}

.popup_matchFliter .btnArea .cancel {
  background: #9c9c9c;
}

.popup_matchFliter .btnArea .confirm {
  background: #ffc331;
}

.animateSlideup {
  -webkit-transform: translate(0, -5rem);
  -moz-transform: translate(0, -5rem);
  -ms-transform: translate(0, -5rem);
  -o-transform: translate(0, -5rem);
  transform: translate(0, -5rem);
}

.maskAnimate {
  -webkit-transform: translate(-6rem, 0rem);
  -moz-transform: translate(-6rem, 0rem);
  -ms-transform: translate(-6rem, 0rem);
  -o-transform: translate(-6rem, 0rem);
  transform: translate(-6rem, 0rem);
}

.gameStatus {
  width: 0.96rem;
  height: 0.29rem;
  line-height: 0.29rem;
  display: table-cell;
  vertical-align: middle;
  color: white;
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  font-size: 0.22rem;
}

.gameStatus.finished {
  background: url("../assets/images/state_end.png") no-repeat;
  background-size: contain
}

.gameStatus.matching {
  background: url("../assets/images/state_doing.png") no-repeat;
  background-size: contain
}

.gameStatus.notstart {
  background: url("../assets/images/state_notstart.png") no-repeat;
  background-size: contain;
  color: #575757;
}

.btnArea {
  margin-bottom: 0.2rem
}

//gamelushi
.gamelushi {
  .guessDetail .matchTop {
    background: url("../assets/images/vsBg_lushi.jpg") no-repeat;
    background-size: cover;
    text-align: center;
    display: table;
    color: #fff;
    position: relative;
  }
  .topBar {
    .title {
      .logo_lol {
        width: 2.44rem;
        height: 0.61rem;
        background-image: url("../assets/images/logo_lol.png")
      }
      .logo_dota2 {
        width: 2.44rem;
        height: 0.61rem;
        background-image: url("../assets/images/logo_dota.png")
      }
      .logo_lushi {
        width: 2.44rem;
        height: 0.61rem;
        background-image: url("../assets/images/logo_lushi.png")
      }
    }
  }
  .historiGrips {
    li {
      &:after {
        display: none;
      }
    }
  }
}

//gamewzry
.gamewzry {
  .guessDetail .matchTop {
    background: url("../assets/images/vsBg_wzry.jpg") no-repeat;
    background-size: cover;
    text-align: center;
    display: table;
    color: #fff;
    position: relative;
  }
  .topBar {
    .title {
      .logo_lol {
        width: 2.44rem;
        height: 0.61rem;
        background-image: url("../assets/images/logo_lol.png")
      }
      .logo_dota2 {
        width: 2.44rem;
        height: 0.61rem;
        background-image: url("../assets/images/logo_dota.png")
      }
      .logo_lushi {
        width: 2.44rem;
        height: 0.61rem;
        background-image: url("../assets/images/logo_lushi.png")
      }
    }
  }
}

//gameoverwatch
.gameoverwatch {
  .guessDetail .matchTop {
    background: url("../assets/images/vsBg_swxf.jpg") no-repeat;
    background-size: cover;
    text-align: center;
    display: table;
    color: #fff;
    position: relative;
  }
  .topBar {
    .title {
      .logo_lol {
        width: 2.44rem;
        height: 0.61rem;
        background-image: url("../assets/images/logo_lol.png")
      }
      .logo_dota2 {
        width: 2.44rem;
        height: 0.61rem;
        background-image: url("../assets/images/logo_dota.png")
      }
      .logo_lushi {
        width: 2.44rem;
        height: 0.61rem;
        background-image: url("../assets/images/logo_lushi.png")
      }
    }
  }
}

//gameyhzr
.gameyhzr {
  .guessDetail .matchTop {
    background: url("../assets/images/vsBg_yhzr.jpg") no-repeat;
    background-size: cover;
    text-align: center;
    display: table;
    color: #fff;
    position: relative;
  }
  .topBar {
    .title {
      .logo_lol {
        width: 2.44rem;
        height: 0.61rem;
        background-image: url("../assets/images/logo_lol.png")
      }
      .logo_dota2 {
        width: 2.44rem;
        height: 0.61rem;
        background-image: url("../assets/images/logo_dota.png")
      }
      .logo_lushi {
        width: 2.44rem;
        height: 0.61rem;
        background-image: url("../assets/images/logo_lushi.png")
      }
    }
  }
}

//gamecf
.gamecf {
  .guessDetail .matchTop {
    background: url("../assets/images/vsBg_cyhx.jpg") no-repeat;
    background-size: cover;
    text-align: center;
    display: table;
    color: #fff;
    position: relative;
  }
  .topBar {
    .title {
      .logo_lol {
        width: 2.44rem;
        height: 0.61rem;
        background-image: url("../assets/images/logo_lol.png")
      }
      .logo_dota2 {
        width: 2.44rem;
        height: 0.61rem;
        background-image: url("../assets/images/logo_dota.png")
      }
      .logo_lushi {
        width: 2.44rem;
        height: 0.61rem;
        background-image: url("../assets/images/logo_lushi.png")
      }
    }
  }
}

//gamecsgo
.gamecsgo {
  .guessDetail .matchTop {
    background: url("../assets/images/vsBg_csgo.jpg") no-repeat;
    background-size: cover;
    text-align: center;
    display: table;
    color: #fff;
    position: relative;
  }
  .topBar {
    .title {
      .logo_lol {
        width: 2.44rem;
        height: 0.61rem;
        background-image: url("../assets/images/logo_lol.png")
      }
      .logo_dota2 {
        width: 2.44rem;
        height: 0.61rem;
        background-image: url("../assets/images/logo_dota.png")
      }
      .logo_lushi {
        width: 2.44rem;
        height: 0.61rem;
        background-image: url("../assets/images/logo_lushi.png")
      }
    }
  }
}
